任天堂爆火的设计风格，在UI设计中的运用
The following article is from 我们的设计日记 Author 小嗝嗝
最近任天堂上一款游戏特别火《厨师RPG》。在这款游戏中，角色在美丽的像素艺术世界中漫游。说到像素风格，不得不提到80后熟悉的，任天堂红掌机，今天我们来学习下这个风格的前世今生。
01. 什么是像素风格
过去采用像素风格是因为受到了显示设备和游戏机内存大小的限制。达斯(Adidas)、戈拉(Gola)和本田(Honda)等品牌合作，证明了像素艺术的受欢迎程度和吸引力。
● 案例来源于网络
像素画如字面所示，是用“像素”为基本单位来制作的画，好比铅笔画就是用铅笔画的画。像素在英文中为pixel或者dot就是点的意思，所以像素画又被称为点阵画。这是对画布上每个像素的控制，没有一个像素是由计算机生成的。像素画从电脑最原始的图像表现方法，演变成了一种独立的数字艺术创作风格。
● 案例来源于网络
像素风格起源于电子游戏，著名游戏“小精灵Pac-Man”、“太空侵略”、“超级马里奥”等。
● 案例来源于网络
在计算机的早期，如果您想显示图形，像素图是唯一的选择。2000年开始家用计算机进入普通中国家庭，普遍安装Windows98系统内置的图标ICON就是像素画。发展至今它仍然风行一时，成为了一门艺术。
▍像素风格视觉感受
● 案例来源于网络
说到像素风格，首先很容易就想到的可能是小小的颗粒感，以及可爱的卡通形象类似的视觉感受。
▍“不清晰”的颗粒像素
● 案例来源于网络
像素风格最明显的特点就是颗粒、锯齿边缘，不用混叠方法来绘制光滑的线条，这些本身就与像素风格以“像素”为基本单位的制作方式有直接关系。
▍可爱的卡通形象
● 案例来源于网络
像素风格给人留下最深印象的印象莫过于游戏机里各种造型的卡通形象，常常采用gif格式，得到很多朋友的喜爱。
02. 像素风格特点
● 案例来源于网络
那么像素风格有哪些特点呢？我一共总结了3条，分别是：
1.复古又潮流
2.独特辨识度
3.像素画的局限
我们分别来看看实际案例如何运用的？
▍复古又潮流
● 案例来源于网络
像素风格源于游戏，游戏也是像素画最大的舞台。像素图由于占空间小，颜色少，所以就被采用来作为制作游戏的标准图片模式。比如80年代小霸王学习机上的游戏，90年代的BG和GBA。
● 案例来源于网络
复古是一场与时空美丽的邂逅，像素风格跨越时间依旧经典，用复古致敬经典、在经典中绽放新意。以提炼，重塑，进而产生新的视觉。
● 案例来源于网络
这个插画用的是像素风格，但是其中很多元素都是偏向科技、潮流的，比如背景以及人物的对称又不规范、明亮的色彩交错、部分小细节的不同。
▍独特辨识度
● 案例来源于网络
像素风格由它自身的特点来决定的，画像素画，有点像拼图，每一个像素方块就是一个拼图块。而且特征非常明显，像素颗粒有规律的组合并保留锯齿边缘的视觉效果，已经变成了一种独特的设计风格。
● 案例来源于网络
像素风格的画虽然非常概括的视觉表达抽象，但是也有它独特的美感，并且简单纯粹的表达形式似乎反而成为了优点，你必须忽略很多细节，而抓住主要特征来表现。这幅人物画像的除了形状，在颜色的利用和表达上，也做到极简。
▍像素画的局限
● 案例来源于网络
前面提到的，像素风格本身的特点，画像素画，有点像拼图，每一个像素方块就是一个拼图块。同时也更耗费精力，不能像矢量图形一样可以随意扩展也是最大的痛处。
● 案例来源于网络
1、像素画不论放大缩小还是旋转，图像插值请选择邻近。你可以在编辑>>首选项》设置。
2、也可以“Ctrl+T”自由变换的时候设置。
3、然后按100%的倍率就可以无损放大。
03. UI中运用
● 案例来源于网络
这套作品，淘宝12.12海报运用的表现形式是像素风格。各种各样的插图形式，用幽默有趣的插画图形表现故事。给人感觉整体画面趣味性、新奇又好玩、并且造型丰富、又充满设计系列感。
● 案例来源于网络
文案采用设问的形式贯穿这套有趣的12.12揭幕海报，通过无厘头的作出疑问/回答式，告诉大家12.12的意义，让我们发现淘宝的新鲜和有趣，感受到12.12狂欢的氛围，增强代入感。
● 案例来源于网络
杜蕾斯首次进军游戏业这组海报，可谓是赚足了我们的眼球。从官方放出的两张预热海报中，能够看到老一代街机、超级玛丽经典童年游戏元素。重现再创的不仅仅是那些一格徒手填的像素色块，也是唤醒了属于我们的回忆，更是将复古和潮流这一对看是矛盾的趋势，完美融合在一起呈现出来。
04. 网页中运用
● 案例来源于网络
2010年，日本优衣库将官网打造成了像素风格，还在其中融合日本的文化特色。一幅欢乐的场景，平添了无尽的趣味性。
● 案例来源于网络
2018年，优衣库和游戏鼻祖一一日本知名游戏公司NAMCO南梦宫合作。将我们熟知的童年经典游戏画面和角色，都印在T恤上了。
● 案例来源于网络
这套作品出至于英国的设计师Mike Kus，他拥有一份世界范围的客户名册，他的作品经常出现在与设计相关的出版物中。Craftsmen是法国数字机构，要求设计出符合他们身份的网站。设计师结合了这个8位图形启发的网站设计，沟通的本质的“数字”这个词。
05. 插画中运用
● 案例来源于网络
这一幅主题关于“瑞克和莫蒂”的动画作品，是设计师Paul Robertson的作品，他的作品很受观众喜欢。
● 案例来源于网络
这幅主题“BASEMENT”也是设计师Paul Robertson的作品。他的作品很多采用中心对称构图，但是又不完全对称。画面色彩、造型、细节和表情都刻画的很细腻传神，将扁平的像素打造出一幅很有层次的像素画。
● 案例来源于网络
这幅“大兔女巫”是Kiana Mosser的作品 。她画的让人看着很温馨、令人愉快，色彩很明亮、五彩缤纷。
06. LOGO中运用
挪威辐射与安全局新LOGO抽象的符号受到用于测量辐射仪器的启发，用不同深浅的色块组合成一个圆形图案。它更多的给人柔和和平静的感觉。同时也传达了DSA如何监督国际和国家辐射形势，是挪威人民可以信赖的专家机构。
● 案例来源于网络
Pangea是一家数字营销机构。在品牌理念吻合下，从像素开始并以像素为基础，这是数字领域的一个代表性元素，并建立了一个多元化的视觉特征。
07. 在线绘制像素风插画
● 案例来源于网络
像素风这么好用，像素风插画怎么制作呢？怎么样才能快速制作呢？没有绘画经验的怎么办呢？像素风在PS和AI都可以制作，今天推荐个简单出效果的方法给大家。
Pixilart是一个好用又方便，还能够在线自定义的绘制像素风插画的网站，打开网站就可绘制，首页默认画布100*100px；网站界面布局于PS类似。
第一步：先选工具。画布左边是工具区域，点击可以开始绘制，颜色正上方图标里面也有现有的模板可以直接使用。
第二步：根据需求条对于的属性。右边属性，看着内容多，其实就四个板块。preview是预览；layer是图层；options是选择；tool是工具，主要是针对颜色的调色和铅笔的粗细调整。
第三步：画好后下载。左上方菜单栏，从左到右依次是新建画布、设置、下载、撤销、返回、全凭绘制。
如果一开始建立的画布太小怕使用图片清晰度不够，下载的可以将画布放大，最大可以放大至10000*10000px，完全不担心清晰度不够。对像素风感兴趣的朋友，快来试试吧。
08. 总结
● 案例来源于网络
像素风格经过多年的发展，依然有很多设计师也大量创作了很多“像素风”插画作品，使像素逐渐成为一门独立的艺术。像素风格是由它自身的特点来决定的，画质有它独特的美感和独特的表现能力。
主页君个人微信
添加主页君个人微信领取：大厂设计规范及组件库、免商中文字体、样机、作品集等
推荐阅读
（点击标题可跳转阅读）
2022年网页设计趋势！网格系统真是太好用了，后悔没有早点学会！2022年度流行色发布, 这是什么神仙颜色？